<template>
  <div class="indexStyle">
    <div>
      <ul>
        <li v-for="(item, index) in srcList" :key="index" class="styleCss">
          <img :src="item.url" alt="" class="BOXimg" />
          <el-button @click="handleOpen(item, index)">查看</el-button>
        </li>
      </ul>
    </div>
    <div class="mtStyle" v-if="showViewer">
      <el-button class="ShutStyle" @click="shutButton"> X </el-button>
      <img
        :src="src"
        alt=""
        class="imgStyle"
        :style="{ width: width + 'px', height: height + 'px', display: boxs }"
      />
      <div class="imgBox">
        <ul class="toolStyle">
          <li class="liStyles">
            <el-button class="buttonLi" @click="topImg">上一张</el-button>
          </li>
          <li class="liStyles">
            <el-button class="buttonLi" @click="bottomImg">下一张</el-button>
          </li>
          <li class="liStyles">
            <el-button class="buttonLi" @click="amplification">放大</el-button>
          </li>
          <li class="liStyles">
            <el-button class="buttonLi" @click="narrowButton">缩小</el-button>
          </li>
        </ul>
        <ul class="imgList">
          <li
            v-for="(item, index) in srcList"
            :key="index"
            class="liStyle"
            @click="getImg(index)"
          >
            <img :src="item.url" alt="" class="imgListStyle" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      widths: "px",
      boxs: "inline - block",
      width: "",
      height: "",
      src: "",
      indexList: [],
      showViewer: false,
      imgIndex: "",
      srcList: [
        {
          url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          indexUrl:
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        },
        {
          url: "https://file.xssbdc.com/static/survey/img/0f34d9b0c3664fcea576042a6d6e3b35.jpg?x-oss-process=image/resize,m_lfit,h_200,w_200",
          indexUrl:
            "https://file.xssbdc.com/static/survey/img/0f34d9b0c3664fcea576042a6d6e3b35.jpg",
        },
        {
          url: "https://tse1-mm.cn.bing.net/th/id/R-C.15a1ba773a211acdeae39f83c2c13241?rik=h1wkOstFSHzvTg&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170120%2ffdf948c82074494a74bf258eed4f855d.jpg&ehk=fYrgVtm0hD0sZn455mcVyf5k%2bQz7RScjHLMyUi6jG0A%3d&risl=&pid=ImgRaw&r=0",
          indexUrl:
            "https://file.xssbdc.com/static/survey/img/8ce5ff4b1c2a42c9a47459142ba21fc9.jpg",
        },
      ],
    };
  },
  created() {},
  methods: {
    //上一张!
    topImg() {
      console.log(this.imgIndex);
      this.imgIndex = this.imgIndex - 1;
      if (this.imgIndex < 0) {
        this.imgIndex = this.srcList.length - 1;
      }
      this.src = this.srcList[this.imgIndex].url;
      this.getData();
    },
    //下一张!
    bottomImg() {
      this.imgIndex = this.imgIndex + 1;
      if (this.imgIndex == this.srcList.length) {
        this.imgIndex = 0;
      }
      this.src = this.srcList[this.imgIndex].url;
      this.getData();
    },
    // 模态框数组列表小图!
    getImg(index) {
      this.src = this.srcList[index].url;
      this.getData();
    },
    // 模态框关闭按钮!
    shutButton() {
      this.showViewer = false;
    },
    // 开启模态框按钮!
    handleOpen(item, index) {
      console.log(item, index);
      this.imgIndex = index;
      this.src = item.url;
      this.showViewer = true;
      this.getData();
    },

    async getData() {
      let that = this;
      let img_url = this.src;
      console.log("this.src", img_url);
      let img = new Image();
      img.src = img_url;
      console.log("src", img.src);
      img.onload = function () {
        that.width = img.width;
        that.height = img.height;
        console.log("获取原始尺寸", img.width, img.height);
      };
    },
    async amplification() {
      this.width = this.width * 1.2;
      this.height = this.height * 1.2;
      console.log("放大的尺寸", this.width, this.height);
    },
    narrowButton() {
      this.width = this.width / 1.2;
      this.height = this.height / 1.2;
      console.log("缩小的尺寸", this.width, this.height);
    },
  },
};
</script>
<style lang="less" scoped>
.indexStyle {
  height: 100%;
  .BOXimg {
    width: 100px;
    height: 100px;
  }
  position: relative;
  .mtStyle {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 200%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    .ShutStyle {
      position: absolute;
      right: 0;
      top: 0;
      width: 50;
      height: 50;
      font-size: 30px;
      border: 1px solid transparent;
      border-radius: 10px 5px 5px 10px;
      background-color: transparent;
      color: aliceblue;
      z-index: 10;
    }
    .imgStyle {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .imgBox {
      width: 100%;
      height: 80px;
      .toolStyle {
        position: fixed;
        left: 40%;
        bottom: 13%;
        .liStyles {
          float: left;
          .buttonLi {
            margin-right: 10px;
            width: 70px;
            height: 40px;
            display: inline-block;
          }
        }
      }

      .imgList {
        position: absolute;
        left: 45%;
        bottom: 10px;
        .liStyle {
          float: left;
        }
        // list-style: none;
        .imgListStyle {
          width: 50px;
          height: 80px;
          display: inline-block;
        }
      }
    }
  }
}
</style>
